<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src='lib/webgl-utils.js'></script>
    <script src='lib/webgl-debug.js'></script>
    <script src='lib/cuon-utils.js'></script>
</head>
<body onload="main()">
<canvas id="mybox" width="500" height="500">
    请更换新版浏览器查看效果!
</canvas>
<script >
// 添加平移的uniform分量
let VSHADER_SOURCE=`attribute vec4 a_position;
    uniform float u_cosB,u_sinB;
    void main(){
        gl_Position.x=a_position.x*u_cosB-a_position.y*u_sinB;
        gl_Position.y=a_position.x*u_sinB+a_position.y*u_cosB;
        gl_Position.z=a_position.z;
        gl_Position.w=1.0;
    }`;
let FSHADER_SOURCE=`
void main(){
gl_FragColor=vec4(1.0,1.0,0.0,1.0);
}`;
let ANGLE=90.0;


    function main(){
        let canvas=document.getElementById('mybox');
        let gl=getWebGLContext(canvas);
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
            console.log('初始化shader失败');
            return;
        }


        let n=initVertexBuffers(gl);
        if(n<0){
            consoel.log('设置顶点位置失败');
            return;
        }
        // 转换为弧度
        let radian=Math.PI*ANGLE/180.0;
        let cosB=Math.cos(radian);
        let sinB=Math.sin(radian);
        // 获取uniform变量的存储位置
        let u_cosB=gl.getUniformLocation(gl.program,'u_cosB');
        let u_sinB=gl.getUniformLocation(gl.program,'u_sinB');
        // 给uniform变量赋值
        gl.uniform1f(u_cosB,cosB)
        gl.uniform1f(u_sinB,sinB)

        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_STRIP,0,n);


    }

    function initVertexBuffers(gl){
        let vertices=new Float32Array([0.0,0.5,-0.5,0.0,0.5,0.0]);
        let Tx=0.5,Ty=0.5,Tz=0.0;
        let n=3;
        let vertexBuffer=gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW);
        let a_position=gl.getAttribLocation(gl.program,'a_position');
        // 获取uniform变量的存储位置
        if(a_position<0){
            console.log('a_position 不存在');
            return ;
        }

        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0);
        gl.enableVertexAttribArray(a_position);
        return n;

    }

</script>

</body>
</html>